<script setup>
import {reactive, watch} from 'vue'

const student = reactive({id: 100, name: '李四', score: 80, teacher: {id: 99, name: '李老师'}})
//(student.score,(a,b)=>{}) 错误
//(student,(a,b)=>{}) student a b 是一个对象，监听不到数据的变化
// watch(()=>student.score, (newScore, oldScore) => {
//   console.log('watch----------------------------')
//   console.log(student)
//   console.log(student.score)
//   console.log(newScore)
//   console.log(oldScore)
//   console.log('watch----------------------------end')
// })

watch(() => student.teacher, (newStu, oldStu) => {
  console.log('watch----------------------------')
  console.log(student)
  console.log(newStu)
  console.log(oldStu)
  console.log('watch----------------------------end222222')
}, {deep: true})


function add() {
  // console.log(student)
  // console.log(student.score)
  // student.score = 10
  // console.log(student)
  // console.log(student.score)

  student.teacher.id = 999

}
</script>

<template>
  <button @click="add">student score add = 10</button>

</template>
